<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据报表 -樱桃检测预警平台</title>
    <link rel="stylesheet" href="../static/css/elementui.css">
    <!-- 引入图标-->
    <link rel="shortcut icon" href="../static/img/favicon.ico" type="image/x-icon">
</head>

<body>
<div id="app">
    <!--header-->
    <el-header style="height: 20%">
        <!--导航栏-->
        <el-row>
            <el-col :span="2" >
                <img src="../static/img/first.jpg" style="width: 100px;margin-top: 4%">
            </el-col>
            <el-col hidden-sm-and-down :span="4">
                <img src="../static/img/word.jpg" style="width: 300px;margin-top: 7%">
            </el-col>
            <el-col :span="15">
                <el-menu default-active="2"
                         class="el-menu-demo headmenu"
                         mode="horizontal"
                         active-text-color="#85130f"
                         index="10">
                    <el-menu-item index="1" style="margin-top: 7%;color: #85130f" ><a href="index.html">首页</a></el-menu-item>
                    <el-menu-item index="2" style="margin-top: 7%;color: #85130f"><a href="datareport.html">数据报表</a></el-menu-item>
                    <el-menu-item index="3" style="margin-top: 7%;color: #85130f"><a href="monitoring.html">实时监控</a></el-menu-item>
                    <el-menu-item index="5" style="margin-top: 7%;color: #85130f"><a href="warning.html">预警分析</a></el-menu-item>
                    <el-menu-item index="6" style="margin-top: 7%;color: #85130f"><a href="datasearch.html">数据分析</a></el-menu-item>
                    <el-menu-item index="7" style="margin-top: 7%;color: #85130f"><a href="callus.html">联系我们</a></el-menu-item>
                </el-menu>
            </el-col>
        </el-row>

    </el-header>

    <!--main-->
    <el-main>
        <!--日志显示-->
        <template>
            <!--日期输入框-->
            <div class="block" style="text-align: center">
                <span class="demonstration" style="color: #82848a">请输入查询的日期范围:</span>
                <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="value7"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions2">
                </el-date-picker>
                <el-button plain v-on:click="searchdata">查询</el-button>
            </div>
            <!--表格-->
            <el-table
                    :data="logData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="id"
                        label="数据ID"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="pestName"
                        label="存在害虫"
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="click" placement="right" @show="searchPest(scope.row.pestName)" width="550">
                            <!--表格显示的数据-->
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.pestName }}</el-tag>
                            </div>
                            <!--点击后显示的数据-->
                            <el-collapse v-model="activeName" accordion >
                                <el-collapse-item title="简介" name="1">
                                    <div>{{nowPest.brief}}</div>
                                </el-collapse-item>
                                <el-collapse-item title="描述" name="2">
                                    <div>{{nowPest.describe}}</div>
                                </el-collapse-item>
                                <el-collapse-item title="发生规律" name="3">
                                    <div>{{nowPest.appearlaw}}</div>
                                </el-collapse-item>
                                <el-collapse-item title="天敌" name="4">
                                    <div>{{nowPest.enemy}}</div>
                                </el-collapse-item>
                                <el-collapse-item title="生活习性" name="5">
                                    <div>{{nowPest.live}}</div>
                                </el-collapse-item>
                                <el-collapse-item title="危害特点" name="6">
                                    <div>{{nowPest.damage}}</div>
                                </el-collapse-item>
                                <el-collapse-item title="防治手段" name="7">
                                    <div>{{nowPest.solve}}</div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="confidence"
                        label="准确率"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="colletionTime"
                        label="检测时间"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="害虫数量"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="harm_level"
                        align="center"
                        label="危害等级">
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <!--点击之后跳转到数据分析界面-->
                        <el-button round @click="toDataSearch(scope.row.id)">数据分析</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--分页效果-->
        <div class="block" style="text-align: center">
            <el-pagination
                    @size-change="findAllLog"
                    @current-change="findAllLog"
                    :current-page.sync="currentPage"
                    :page-size="size"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </el-main>

    <!--footer-->
    <el-footer style="height:180px">
        <el-row>
            <!--存放文字说明-->
            <el-col style="color: #85130f;text-align: center">
                <h3>萤检|樱桃害虫预警平台</h3>
                <div>联系电话:13333333333</div>
                emial:<span style="color: #3a8ee6">123@163.com</span>
                <div>地址:广东省广州市海珠区滨江街道仲恺路</div>
                <div>版权所有:萤检有限公司</div>
            </el-col>
        </el-row>
    </el-footer>

</div>
</body>

<!-- 引入vue和elementUI所需配置文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../static/js/vuejs-2.5.16.js"></script>
<script src="../static/js/elementui.js"></script>
<script src="../static/js/axios.js"></script>

<!-- 引入index.js文件
<script type="text/javascript" src="../static/js/index.js"></script>-->
<!-- 引入index.css文件 -->
<style>
    @import "../static/css/index.css";
</style>
<!-- util.js文件 -->
<script type="text/javascript" src="../static/js/jumpPage.js"></script>
<!--引入js文件-->
<script src="../static/js/index.js"></script>
<script>
    findAllLog();
</script>
</html>
